<template>
  <div class='nav-bar'>
    <van-nav-bar   fixed ref="re">
        <template #left>
          <van-icon name="arrow-left" @click="onClickBack"/>
          <div class="left-top" v-show="showAuthor">
            <van-image
              width="0.6rem"
              height="0.6rem"
              fit="cover"
              round
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
              @click="onClickUser"
            />
            <h4 @click="onClickUser">你的Maya</h4>
            <b @click="OnClickFollowing">关注</b>
          </div>
      </template>
      <template #right>
        <div class="right-top">
           <van-icon class="right-top-icon" name="search" size="18" @click="onClickSearch"/>
           <van-icon name="ellipsis" @click="onClickShare"/>
        </div>
      </template>
      </van-nav-bar>
   </div>
</template>

<script>
import bus from '@/utils/bus'
export default {
  name: 'NavBar',
  components: {},
  data () {
    return {
      showAuthor: false
    }
  },
  created () {
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll (e) {
      const scrollTop = e.target.scrollTop
      const offsetTop = this.$parent.$refs.author.offsetTop + this.$parent.$refs.author.offsetHeight
      if (scrollTop > offsetTop) {
        this.showAuthor = true
      } else {
        this.showAuthor = false
      }
    },
    onClickBack () {
      this.$router.back()
    },
    onClickUser () {
      this.$router.push('/user')
    },
    OnClickFollowing () {
      console.log('点击了关注作者')
    },
    onClickShare () {
      bus.$emit('onClickShare')
    },
    onClickSearch () {
      this.$router.push('/search')
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll, true)
  }
}
</script>
<style lang="scss" scoped>
.left-top{
   display:flex;
   align-items: center;
   color: #000;

   .van-image{
    margin-left:25px;
   }
   h4{margin:0px 10px;}
   b{color:rgb(240, 62, 38)}
}
.right-top{
  .right-top-icon{
    margin-right: 20px;
  }
}
</style>
